<template>
  <div class="task-item">
    <div class="item-left">
      <el-tooltip placement="top" :content="taskInfo.info" :visible="isShow">
        <div class="head">
          <div class="task-item-header" ref="taskHeader">
            {{ taskInfo.info }}
          </div>
        </div>
      </el-tooltip>
      <div class="info">
        <div class="create-time">
          <i class="iconfont icon-dengdaizhong"></i> {{ taskInfo.createTime }}
        </div>
      </div>
    </div>
    <div class="item-right">
      <div
        class="loading"
        v-if="taskInfo.status === 1 || taskInfo.status === 0"
      >
        <i class="iconfont icon-jiazai"></i>
      </div>
      <div class="right-success" v-else>
        <div
          class="downFile"
          v-if="taskInfo.resultType == 0 && taskInfo.status == 2"
        >
          <el-tooltip placement="top" content="下载">
            <i class="iconfont icon-xiazai" @click="downLoadFile"></i>
          </el-tooltip>
        </div>
        <div class="lookInfo" v-else>
          <el-tooltip placement="top" content="查看">
            <i class="iconfont icon-chakan1" @click="lookTask"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="task-status" :class="getStatus.typeClass">
        {{ getStatus.typeName }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { nextTick } from "process";
import { ref, onMounted, toRefs, computed, watch } from "vue";
import { getTaskDataAPI } from "@/api/ojAPI/ojAPI";
import { getFileUrl } from "@/utils/global.js";
import axios from "axios";
import { ElMessage } from "element-plus";

const props = defineProps({
  taskInfo: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { taskInfo } = toRefs(props);

const emit = defineEmits(["lookTask"]);
const nowTackInfo = ref({});
const isShow = ref(false);
const taskHeader = ref(null);
const getStatus = computed(() => {
  switch (taskInfo.value.status) {
    case 0:
      return { typeName: "等待中", typeClass: "wait" };
    case 1:
      return { typeName: "执行中", typeClass: "runing" };
    case 2:
      return { typeName: "已完成", typeClass: "success" };
    case 3:
      return { typeName: "执行失败", typeClass: "danger" };
    default:
      return { typeName: "未知状态", typeClass: "unknown" };
  }
});
watch(
  props.taskInfo,
  () => {
    nextTick(() => {
      // 确保 taskHeader.value 存在
      if (taskHeader.value) {
        const { width } = taskHeader.value.getBoundingClientRect();
        const { scrollWidth } = taskHeader.value;
        isShow.value = scrollWidth > width; // 更新 isShow 的值
      }
    });
  },
  {
    immediate: true,
  }
);
const downLoadFile = async () => {
  const fileUrl = getFileUrl(taskInfo.value.result);
  ElMessage.success("开始下载文件，请稍等...");
  try {
    const response = await axios.get(fileUrl, {
      responseType: "blob",
      headers: {
        Authorization: localStorage.getItem("TOKEN"),
      },
    });
    const name = fileUrl.split("?")[0];
    const fileName = name.split("/").pop();
    const url = URL.createObjectURL(response.data);
    const link = document.createElement("a");
    link.target = "_blank";
    link.href = url;
    link.style.diaplay = "none";
    link.download = fileName; // 设置下载文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 清理 DOM
    setTimeout(() => URL.revokeObjectURL(url), 100);
  } catch (err) {
    console.log(err);

    if (
      !err.response?.status ||
      err.response.status == 404 ||
      err.response.status == 403
    ) {
      ElMessage.error("已超出1小时，文件已失效");
    }
  }
};

const lookTask = () => {
  emit("lookTask", taskInfo.value);
};
</script>
<style lang="less" scoped>
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  transition: all 0.2s ease-in-out;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    transform: scale(1.02);
    background-color: #ffffff1c;
  }

  .item-left {
    .head {
      display: flex;
      align-items: center;
    }

    .task-item-header {
      min-width: 150px;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #555;
      font-size: 14px;
    }

    .create-time {
      margin-top: 5px;
      color: #8c8c8c;
      font-size: 13px;

      .iconfont {
        font-size: 13px;
      }
    }
  }

  .item-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 50px;

    .loading {
      animation: rotate 2s linear infinite;

      .iconfont {
        background: linear-gradient(
          to right,
          rgb(232, 65, 65),
          rgb(124, 232, 65),
          rgb(72, 72, 228)
        );
        -webkit-background-clip: text;
        color: transparent;

        &:hover {
          color: transparent !important;
        }
      }
    }

    .task-status {
      color: #8c8c8c;
      font-size: 12px;
      margin-top: 5px;

      &.wait {
        color: #8c8c8ce1;
      }

      &.runing {
        color: #188fffd5;
      }

      &.success {
        color: #53c41adc;
      }

      &.danger {
        color: #ff4d50e5;
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    /* 从 0 度开始 */
  }

  10% {
    transform: rotate(30deg);
  }

  60% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(360deg);
    /* 旋转到 360 度 */
  }
}
</style>
